import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Cell, Image, Toast, Typography, Divider } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './order-detail.less';

const goBack = () => {
  history.back();
}
const goPartner = () => {
  history.push('/partner');
}

export default function OrderDetailZzPage() {
  return (
    <div className='order-detail-zizhu'>
      <NavBar title='订单详情' leftText='返回' onClickLeft={goBack} />
      <div className='order-detail-box'>
        <Cell center>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <div className='order-detail-location'>位置：光谷泛悦城贰麻酒馆</div>
              <div className='order-detail-type'>项目：微醺小酌</div>
              <div className='order-detail-date'>时间：2024-06-14 20:00 ~ 23:00</div>
            </Flex.Item>
            <Flex.Item>
              <div className='order-detail-status'><span className='done'>已完成</span></div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='order-detail-info'>
          <div className='order-detail-num'>订单编号：20240614214843652 <span className='copy'
                                                                             onClick={() => Toast.info('已复制订单号')}>复制</span>
          </div>
          <div className='order-detail-time'>下单时间：2024-06-14 21:48:43</div>
        </Cell>
      </div>

      <Divider className='order-signup-title'>已报名陪玩搭档</Divider>
      <div className='container'>
        <div className='order-signup-box'>
          <Flex align='center' justify='start' wrap='wrap' gutter={10}>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' onClick={goPartner} />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='signup-item' onClick={goPartner}>
                <div className='signup-avatar'>
                  <Image className='avatar-img' lazyload round width='48' height='48' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                </div>
                <h4 className='signup-name'><Typography.Text ellipsis>小熊</Typography.Text></h4>
              </div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
